<template>
  <div id="main-con-tabs" @click="check">
    <tabs-detail>
    <img src="~assets/images/noPic.jpg" alt="" class="pic" slot="tabs-left">
    <tabs-detail-item slot="tabs-top">
      <div class="con-tabs-title" slot="item-title">{{showsItem.title}}</div>
    <div class="con-tabs-content" slot="item-content">{{showsItem.content}}</div>
      </tabs-detail-item>
    <label slot="tabs-bottom">
    <span slot="label-firm" class="btm">{{showsItem.company}}</span>
    <span slot="label-date" class="btm">{{showsItem.date}}</span>
    <span slot="label-read">
      <label-item v-if="!showsItem.bid&&showsItem.bid!=0">
        <span slot="label-item-left">
          <span slot="label-item-right" class="btm">
            <span>
              <img src="~assets/images/浏览@1x.png" alt="">
              </span>{{showsItem.browse}}</span>
              </span>
              </label-item>
              <span v-else>{{showsItem.browse}}人已浏览 / <span style="color:red">{{showsItem.bid}}</span>人已投标</span>
              </span>
    <span slot="label-agree">
      <label-item v-if="!showsItem.bid&&showsItem.bid!=0">
        <span slot="label-item-left"></span>
        <span slot="label-item-right" class="btm">
          <span><img src="~assets/images/点赞@1x.png" alt=""></span>
          {{showsItem.liked}}</span>
          </label-item>
          </span>
      </label>
    </tabs-detail>
    <img src="~assets/images/分割线@1x.png" alt="">
  </div>
</template>
<script>
import Label from 'components/common/contabs/label/Label.vue'
import TabsDetail from 'components/common/contabs/tabsdetail/TabsDetail.vue'
import TabsDetailItem from 'components/common/contabs/tabsdetail/TabsDetailItem.vue'
import LabelItem from '../../common/contabs/label/LabelItem.vue'
export default {
  name:'MainConTabs',
  data(){
    return {
      title:'',
      content:'',
      read:'',
      like:''
    }
  },
  components:{
    TabsDetail,
    TabsDetailItem,
    Label,
    LabelItem
  },
  props:{
    showsItem:{
      type:Object,
      default(){
        return {}
      }
    },
    myurl:String
  },
  methods:{
    check(){
      this.$router.push(this.myurl + this.showsItem.id);
    }
  }
}
</script>
<style>
#main-con-tabs .pic{
  width: 14.375rem;
  height: 11.25rem;
}
#main-con-tabs .con-tabs-title{
  font-size: 30px;
}
#main-con-tabs .con-tabs-content{
  height: 60px;
  text-align: left;
  font-size: 14px;
  color: #969bab;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
#main-con-tabs .btm{
  margin: 0 20px;
  font-size: 14px;
}
#main-con-tabs .btm img{
  width: 16px;
  margin: 0 4px;
  vertical-align:middle;
}
#main-con-tabs .label-date,
#main-con-tabs .label-read,
#main-con-tabs .label-agree{
  color: #969bab;
}
</style>